09. 호이스팅 (Hoisting)

June 9, 2021

Tags

JavaScript

09. 호이스팅 (Hoisting) thumbnail

Hoisting

var result = book();
console.log(result); //=> 호이스팅

function book() {
  return "호이스팅";
}

일반적인 스크립팅 언어는 위에서부터 아래로 실행되므로,아직 book()함수의 정의가 안되어 있는 첫번째 줄에서는 에러가 발생한다.

그러나 자바스크립트에서, 함수 선언문은 초기화 단계에서 function object를 생성하므로, 어디에서도 함수를 호출할 수 있다. 이것을 JS의 Hoisting이라고 한다.

먼저 선언문을 해석(초기화) : 함수 선언문은 초기화 단계에서 function object를 생성한다.
표현식을 처리 : 메모리 공간 할당과 메모리 공간에 이름을 붙인다.(변수명, 함수명을 처리하는 것)
코드 실행 단계 : book함수는 선언문으로 되어있어 이미 function object가 있으므로 호출이 가능하다.

표현식의 초기화가 일어나지 않는 경우

var result = book();
console.log(result); //=> 호이스팅

function book() {
  return "호이스팅";
}
book = function () {
  return "함수 표현식";
};

console.log(result)의 결과는 "호이스팅"이다.
- 함수 선언문(4번째 줄)에 의해 엔진은 book에 function object를 할당한다.
- 표현식 처리 과정에서 book=undefined를 해야할 것 같지만, Scope안의 book 변수에 미리 값이 할당되어 있는 경우에 초기화를 진행하지 않는다.
- 따라서 실행 과정에서 console 출력의 결과는 "호이스팅"이다.

선언문은 덮어쓰기 한다. -> 오버로딩 미지원

function book() {
  function getBook() {
    return "책1";
  }

  console.log(getBook()); //=> 책2
  function getBook() {
    return "책2";
  }
}
book();

선언문은 작성된 순서대로 처리된다.
- 따라서 getBook에 마지막으로 할당된 것은 "책2"를 반환하는 function object가 할당된다.

Overloading

함수 이름이 같더라도, 파라미터 수 또는 값의 타입이 다르면 각각의 함수가 존재하는 것이 오버로딩이다.

그러나 자바스크립트는 오버로딩을 지원하지 않는다. 자바스크립트는 파라미터 수와 값 타입을 구분하지 않고 Scope에 {name: value}로 저장하기 때문이다. 함수 이름이 같으면 동일한 key값이 되기 때문이다.

Written by@2-one-week

현재 블로그 개발 중

GitHub LinkedIn